<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; padding: 0;
			}
			.box {
				
				height: 300px; width: 300px;
				margin: 100px 200px;
				overflow: hidden;
				position: relative;
				/* background: url(img/8.png); */
			}
			div > img {
				height: 300px; width: 300px;
				transition: 1s;
			}
			div h2 {
				color: white; width: 200px;
				position: absolute; left: 10px; top: 230px;
				/* transition: 1s; */
			}
			.box p {
				color: white;
				/* float: left; */
				/* transition: 1s; */
			}
			.box p:nth-of-type(1) {
				position: absolute;
				left: -160px; top: 140px;
				transition: 0.5s;
			}
			.box p:nth-of-type(2) {
				position: absolute;
				left: -160px; top: 170px;
				transition: 1s;
			}
			.box p:nth-of-type(3) {
				position: absolute;
				left: -160px; top: 200px;
				transition: 1.5s;
			}
			.box:hover p:nth-of-type(1) {
				position: absolute;
				left: 10px; top: 140px;
			}
			.box:hover p:nth-of-type(2) {
				position: absolute;
				left: 10px; top: 170px;
			}
			.box:hover p:nth-of-type(3) {
				position: absolute;
				left: 10px; top: 200px;
			}
			.box:hover img {
				transform: scale(1.3) rotateZ(20deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/8.png" >
			<h2>Taylor Swift</h2>
			<p class="p1">Birthday:1989.12.13</p>
			<p class="p2">Height:180cm</p>
			<p class="p3">Weight:56kg</p>
		</div>
	</body>
</html>
